<script lang="ts" setup>

import Intro from "./Intro.vue";

import { ref, onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import Manager from '../js/Manager'
import gsap from 'gsap'

import { Tween } from "gsap/types/Tween";

const manager = ref()


let bodyGsapRef: Tween = null;
let outLineGsapRef: Tween = null;
let avatar1GsapRef: Tween = null;
let avatar2GsapRef: Tween = null;
let avatar3GsapRef: Tween = null;
let intro1GsapRef: Tween = null;
let intro2GsapRef: Tween = null;
let intro3GsapRef: Tween = null;

const isOpen = ref(false)

const nianiaClick = () => {
    if (isOpen.value) return;
    isOpen.value = true;
    bodyGsapRef = gsap.to('.card', { scale: 1, ease: 'ease-in-out', duration: .4 })
    outLineGsapRef = gsap.to('.info-1', { opacity: 1, duration: .4 })
    avatar1GsapRef = gsap.to('.avatar-1', { x: '30px', y: '10px', borderRadius: '50%', duration: .4 })
    avatar2GsapRef = gsap.to('.avatar-2', { opacity: 0, borderRadius: '50%', duration: .4 })
    avatar3GsapRef = gsap.to('.avatar-3', { opacity: 0, borderRadius: '50%', duration: .4 })
    intro1GsapRef = gsap.to('.intro-1', { opacity: 0, duration: .4 })
    intro2GsapRef = gsap.to('.intro-2', { opacity: 0, duration: .4 })
    intro3GsapRef = gsap.to('.intro-3', { opacity: 0, duration: .4 })



}
const nianiaClose = () => {
    if (!isOpen.value) return;
    isOpen.value = false;
    bodyGsapRef.reverse()
    outLineGsapRef.reverse()
    avatar1GsapRef.reverse()
    avatar2GsapRef.reverse()
    avatar3GsapRef.reverse()
    intro1GsapRef.reverse()
    intro2GsapRef.reverse()
    intro3GsapRef.reverse()
}




// 职业履历
const careerTimeline = gsap.timeline();
// 挂载时间线动画
const mountedInitCareer = () => {
    careerTimeline.pause();
    careerTimeline.to('.section', { opacity: 0, duration: .4 })
    careerTimeline.to(manager.value.camera.perspectiveCamera.position, { y: -1 * manager.value.cube.objectsDistance, duration: .6 })
    careerTimeline.to('.career', { opacity: 1, duration: .4 })
    careerTimeline.to('.back', { opacity: 1, duration: .2 }, "<")
}

const careerClick = () => {
    careerTimeline.play();
}
const BackToIndex = () => {
    careerTimeline.reverse()
    otherTimeline.reverse()
}

// 其他相关
const otherTimeline = gsap.timeline();

// 挂载时间线动画
const mountedInitOtherTimeline = () => {
    otherTimeline.pause();
    otherTimeline.to('.section', { opacity: 0, duration: .4 })
    otherTimeline.to(manager.value.camera.perspectiveCamera.position, { y: -2 * manager.value.cube.objectsDistance, duration: .6 })
    otherTimeline.to('.other', { opacity: 1, duration: .2 })
    otherTimeline.to('.back', { opacity: 1, duration: .2 }, "<")
}

const otherClick = () => {
    otherTimeline.play();
}

// 跳转开发合集
const router = useRouter()
const goCollections = () => {
    router.push('/home')
}
onMounted(() => {
    const canvas = document.querySelector('#webgl')
    manager.value = new Manager(canvas)

    gsap.fromTo('.list-box', { x: '-40px' }, { x: '0px', stagger: .2, duration: .5 })
    mountedInitCareer();
    mountedInitOtherTimeline();
})
onUnmounted(() => {
    manager.value.destroy()
})
</script>
<template>
    <div class="portfolio-background relative">
        <canvas id="webgl"></canvas>

        <section class="section box-border max-w-7xl mx-auto">
            <h1 class="title mt-120px text-32px translate-x-10px">陈翀个人主页</h1>
            <div class="content w-400px flex flex-col ">
                <h5 class="desc text-64px">个人简历概述</h5>
                <div class="list mt-10px ml-20px w-500px h-500px relative">
                    <div class="list-box relative z-2">
                        <div @click="nianiaClick"
                            class="intro-1 absolute cursor-pointer z--1 left-40px top-20px w-250px h-100px border-rd-4px bg-#12172e shadow flex flex-col items-end justify-center pr-20px">
                            <span class="color-#fcfcfc text-30px">个人简介</span>
                            <span class="color-#fcfcfc text-16px">INTRODUCE</span>
                        </div>
                        <img src="../imgs/niania3.png" @click="nianiaClick"
                            class="avatar-1 w-100px h-100px border-rd-4px border-2px border-color-#fff border-solid cursor-pointer">
                    </div>

                    <div class="list-box relative">
                        <div @click="careerClick"
                            class="intro-2 cursor-pointer absolute z--1 left-40px top-20px w-250px h-100px border-rd-4px bg-#12172e shadow flex flex-col items-end justify-center pr-20px">
                            <span class="color-#fcfcfc text-30px">职业履历</span>
                            <span class="color-#fcfcfc text-16px">CAREER</span>
                        </div>
                        <img src="../imgs/niania2.png" @click="careerClick"
                            class="avatar-2 w-100px h-100px border-rd-4px border-2px border-color-#fff border-solid cursor-pointer">
                    </div>
                    <div class="list-box relative">
                        <div @click="otherClick"
                            class="intro-3 cursor-pointer absolute z--1 left-40px top-20px w-250px h-100px border-rd-4px bg-#12172e shadow flex flex-col items-end justify-center pr-20px">
                            <span class="color-#fcfcfc text-30px">其他相关</span>
                            <span class="color-#fcfcfc text-16px">OTHERS</span>
                        </div>
                        <img src="../imgs/niania5.png" @click="otherClick"
                            class="avatar-3 w-100px h-100px border-rd-4px border-2px border-color-#fff border-solid cursor-pointer">
                    </div>
                    <div class="list-box relative">
                        <div @click="goCollections"
                            class="intro-3 cursor-pointer absolute z--1 left-40px top-20px w-250px h-100px border-rd-4px bg-#12172e shadow flex flex-col items-end justify-center pr-20px">
                            <span class="color-#fcfcfc text-30px">开发合集</span>
                            <span class="color-#fcfcfc text-16px">Collections</span>
                        </div>
                        <img src="../imgs/niania1.png" @click="goCollections"
                            class="avatar-3 w-100px h-100px border-rd-4px border-2px border-color-#fff border-solid cursor-pointer">
                    </div>


                    <div class="card absolute left-0px top-20px z-1 scale-0">
                        <!-- <img src="../imgs/close.png" class="w-40px h-40px absolute top-20px right-20px" /> -->
                        <div class="info-1 bg-#050514 border-rd-6px w-480px h-480px opacity-0 ">
                            <Intro />


                        </div>
                        <span class="absolute bottom-40px left-40px color-#fff z-4 text-26px"
                            @click="nianiaClose">关闭</span>
                    </div>

                </div>


            </div>


        </section>

        <!-- 职业生涯 -->
        <div class="career absolute right-100px top-50% translate-y--50% w-750px h-800px flex opacity-0">
            <div class="w-80px h-full flex flex-col items-center translate-x-10px">
                <div class="w-12px h-12px border-rd-50%  bg-#3d7fff"></div>
                <div class="w-4px h-full bg-gradient-to-t from-#3d7fff00 to-#3d7fff translate-y--8px border-rd-40px">
                </div>
            </div>

            <div class="flex-1 h-full flex flex-col px-20px py-10px">
                <span class="text-24px color-#699bff mb-10px">职业履历 (倒序)</span>
                <div class="flex flex-col items-start mb-20px">
                    <span class="mb-6px text-20px color-emerald-2">2021.12 至 2024.9 — 杭州致诚电子科技有限公司</span>
                    <span class="text-18px color-#699bff">主要项目 — 红船电力园区平台</span>
                    <span class="">主要负责vite版vue3框架搭建,开发，各类echarts设计图表开发，能流动效图canvas版开发、性能优化等</span>
                    <span class="text-18px color-#699bff">主要项目 — 丽水电网大屏项目</span>
                    <span class="">在已有项目基础上迭代，主要负责大屏分辨率优化，各类echarts图表开发，gsap完善页面动效，threejs优化替换echarts地图等功能</span>
                    <span class="text-18px color-#699bff">主要项目 — 丽水广域电网项目</span>
                    <span class="">框架搭建，引入TS开发，首页gsap动效制作，用户权限管理等</span>
                </div>
                <div class="flex flex-col items-start mb-20px">
                    <span class="mb-6px text-20px color-emerald-2">2019.11 至 2021.11 — 顺丰金融支付组前端</span>
                    <span class="text-18px color-#699bff">主要H5项目 — 顺丰金融礼品卡、顺丰IOS巴枪WEB内嵌</span>
                    <span class="">负责产品迭代开发，用户滑动列表体验优化、CSS3动画效果绘制</span>
                    <span class="">负责巴枪IOS以及后台API对接，JS加解密部分对接</span>
                    <span class="text-18px color-#699bff">主要Vue项目 - 顺丰信贷催收后台管理开发、顺丰信贷核心后台管理开发</span>
                    <span class="">负责信贷催收总览页面开发、电催、委外等多个模块的开发</span>
                    <span class="">负责信贷核心抽离前端逻辑，从后台生成VUE文件模式改成前后端分离开发模式</span>

                </div>

                <div class="flex flex-col items-start mb-20px">
                    <span class="mb-6px text-20px color-emerald-2">2017.10 至 2019.10 — 中电工业互联网</span>
                    <span class="text-18px color-#699bff">主要项目 — 仿滴答清单桌面端程序Electron Vue版本开发</span>
                    <span class="">负责产品日历模块，笔记模块开发，存储使用Sequelize前端数据库，使用Electron将Vue程序打包成桌面端程序</span>
                    <span class="text-18px color-#699bff">主要项目 - 中电云网官网开发</span>
                    <span class="">使用Vue2搭建项目底层框架、开发多个模块动效等</span>
                    <span class="text-18px color-#699bff">主要项目 - 中电小程序开发</span>
                    <span class="">使用原生小程序开发、之后使用wepy框架重构小程序</span>

                </div>
            </div>
        </div>

        <!-- 其他相关 -->
        <div class="other absolute left-100px top-50% translate-y--50% w-750px h-800px flex opacity-0 z--1">
            <div class="w-80px h-full flex flex-col items-center translate-x-10px">
                <div class="w-12px h-12px border-rd-50%  bg-#e3ffe7"></div>
                <div class="w-4px h-full bg-gradient-to-t from-#3d7fff00 to-#e3ffe7 translate-y--8px border-rd-40px">
                </div>
            </div>
            <div class="flex-1 h-full flex flex-col px-20px py-10px">

                <span class="text-24px color-#e3ffe7 mb-10px">其他相关</span>

                <div class="flex flex-col items-start mb-20px">
                    <span class="mb-6px text-20px color-emerald-2">技术特点</span>
                    <span class="">threejs、echarts、vue、gsap、unocss</span>
                    <span class="">这些是最常用的技术、threejs实际应用到地图开发的比较少</span>
                    <span>因为需要建模师的支持，</span>
                    <span>自己的话利用blender也会建立一些简单模型，如个人开发记录里面的地图那页</span>
                    <span>对于网页开发，ElementUI也是最常用的一部分。</span>
                    <span>但实际还是喜欢开发一些有动效的网页部分</span>

                </div>
                <div class="flex flex-col items-start mb-20px">
                    <span class="mb-6px text-20px color-emerald-2">总体而言</span>
                    <span class="">因为地图相关的开发比较多，对Threejs3D地图有些研究，</span>
                    <span>主要因为3D地图比较cesuim、echarts开发自定义程度高，性能比较好</span>
                    <span>当然工作中echarts2D地图开发也不在少数，由于设计的地图风格化程度高</span>
                    <span>而echarts提供的地图开发没办法跟设计高度吻合，</span>
                    <span>所以直到后期才发现用svg做底图的方式更加适合实际开发</span>
                    <span>之前根据echarts提供的api硬造地图不可取</span>
                    <span>gsap以及unocss也是为开发增加效率的利器</span>
                </div>

                <div class="flex flex-col items-start mb-20px">
                    <span class="mb-6px text-20px color-emerald-2">其余爱好</span>
                    <span>喜欢研究游戏攻略</span>
                    <span>也会unity开发独立游戏，但是发展下来感觉素材+数据+动画配置</span>
                    <span>实在不太适合自己全职开发，工作量巨大且没有保证</span>
                    <span>工作之余作为兴趣，慢慢积累自己的独立游戏体量是比较靠谱的想法</span>

                </div>
            </div>

        </div>

        <div class="back opacity-0 color-#fff absolute right-120px bottom-120px text-30px cursor-pointer"
            @click="BackToIndex">
            返回</div>
        <!-- <section class="section box-border max-w-7xl mx-auto">
            <h1 class="title">Vue</h1>

        </section>
        <section class="section box-border max-w-7xl mx-auto">
            <h1 class="title">Others</h1>

        </section> -->
    </div>
</template>
<style lang="scss" scoped>
#webgl {
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}

.test-color {
    color: #e3ffe7;
}

.section {

    display: flex;
    align-items: flex-start;
    flex-direction: column;
    height: 100vh;
    position: relative;
    font-family: "Cabin", sans-serif;
    color: #ffeded;
    text-transform: uppercase;
    // font-size: 5vmin;

    &:nth-child(odd) {
        align-items: flex-end;
    }

    .desc {
        cursor: pointer;
        user-select: none;
    }
}

.career {
    font-family: cursive;
}

.other {
    font-family: cursive;
}

@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}

.list {
    font-family: cursive;

    .list-box {
        margin-top: 40px
    }
}

.card {
    width: 500px;
    height: 500px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: left top;
    font-size: 14px;
    color: rgb(88 199 250 / 0%);
    cursor: pointer;
    font-family: cursive;

    &::before {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        position: absolute;
        z-index: -1;
        top: 0%;
        left: 0%;
        animation: spin 2.5s linear infinite;
    }

    &::after {
        position: absolute;
        content: "";
        top: calc(500px/ 6);
        left: 0;
        right: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        // margin: 0 auto;
        filter: blur(calc(500px / 6));
        background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
        opacity: .5;
        transition: opacity .5s;
        animation: spin 2.5s linear infinite;
    }
}

@keyframes spin {
    0% {
        --rotate: 0deg;
    }

    100% {
        --rotate: 360deg;
    }
}
</style>